import React from 'react'

import { NavBar, Icon,Slider,WingBlank } from 'antd-mobile';
import {LevelWrap,LevelBonus} from './StyledLevel'
import icon from '@a/images/lxl/iconimg.png'

import{useHistory} from 'react-router-dom'

import lb1 from '@a/images/lxl/lb1.png'
import lb2 from '@a/images/lxl/lb2.png'
import lb3 from '@a/images/lxl/lb3.png'
import lb4 from '@a/images/lxl/lb4.png'
import lb5 from '@a/images/lxl/lb5.png'
import lb6 from '@a/images/lxl/lb6.png'

const Mylevel=()=>{
  let history=useHistory()

  return (
    <div>
      <NavBar
          mode="dark"
          icon={<Icon type="left" />}
          onLeftClick={() => history.goBack()}
          >我的等级
      </NavBar>
      <LevelWrap>
        <img src={icon} alt=""/>
        <span className="youxiao">有效期至2019-01-11</span>
        <div className="flexsheng">
          <WingBlank size="lg">
            <Slider
              style={{ marginLeft: -10, marginRight: -10}}
              defaultValue={0}
              min={0}
              max={30}
              trackStyle={{
                backgroundColor: '#89bfff',
                // borderRadius:'5px',
                height: '5px',
              }}
              railStyle={{
                backgroundColor: '#0052ee',
                borderRadius:'5px',
                height: '5px',
              }}
              handleStyle={{
                borderColor: '#0052ee',
                height: '5px',
                width: '5px',
                marginLeft: '-5px',
                marginTop: '0px',
                backgroundColor: '#0052ee',
                borderRadius:'5px'
              }}
            />
            <div className="shengji">
              <span className="shengjikuai">升级</span>
              <span>在获取1积分即可升级为初级</span>
            </div>
          </WingBlank>
        </div> 
        <p>有效期更新后等级积分和等级特权将重新计算哦</p>
      </LevelWrap>
      <LevelBonus>
        <h2 className="title">等级福利</h2>
        <ul>
          <li><img src={lb1} alt=""/><span>教学锦囊</span><p>教研师训资源</p></li>
          <li><img src={lb2} alt=""/><span>新讲堂免费看</span></li>
          <li><img src={lb3} alt=""/><span>优质期刊资源</span><p>论文优先推荐</p></li>
          <li><img src={lb4} alt=""/><span>客服电话<p>优先接入</p></span></li>
          <li><img src={lb5} alt=""/><span>新功能<p>优先体验</p></span></li>
          <li><img src={lb6} alt=""/><span>学术会议</span><p>优先参与</p></li>
        </ul>
        <div className="footer">
        快来签到升等级
      </div>
      </LevelBonus>
     
    </div>
  )}

export default Mylevel